<template>
	<view class="">
		<view class="container" :style="{ 'background-image': `url(${bg})` }">
			<view class="bg" :class="title != '' ? 'bg-color' : ''">
				
				
				<u-icon @click="goBack" size="36" name="arrow-left" color="#fff"></u-icon>
				<text>{{title}}</text>
				<view class="">
				</view>
			</view>
			
		</view>
		<view class="box-img">
			<image :src="textImg" mode=""></image>
		</view>
		<view class="box">
			
			<view class="office">
				<view class="office-item" v-for="(item,index) in office.slice(0,9)" :key="index">
					<view class="office-bg" :style="{ 'background-image': `url(${textbg})` }"
						@click="officeClick(item)">
						<image :src="item.photoUrl" mode=""></image>
						<view class="">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import {
		toast,
		getStore,
		setStore,
		removeStore
	} from "@/utils/index";
	import {
		listDep
	} from '../../service/api.js'
	import config from "../../utils/config";
	export default{
		data(){
			return{
				//背景大图
				bg: config.ossHost + '2024/12/29/9667feab1c6c4466a806f818536d7eac.png',
				textImg: config.ossHost + '2024/12/29/6d671c3b93344cef98656dc38647a3f2.png',
				
				textbg: config.ossHost + '2024/12/29/b17ef8ce519842209aaf9fb9ce509d1a.png',
				office: [{
						title: '中医'
					},
					{
						title: '中医'
					},
					{
						title: '中医'
					},
					{
						title: '中医'
					},
					{
						title: '中医'
					}
				],
			}
		},
		onLoad() {
			this.getlistDep();
		},
		methods:{
			goBack() {
				
				
				    uni.navigateBack({
				    	delta: 1,
				    });
				
				
				
				
			},
			
			//获取科室
			async getlistDep() {
				let res = await listDep(this.params);
				if(res.code==200){
					this.office=res.rows
				}

			},
			//跳转科室页面
			officeClick(item) {
				setStore("office",JSON.stringify(item));
				uni.navigateTo({
					
					url: `/integration/doctorsList/index?itemid=${item.id}&itemtitle=${item.title}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// background: red;
	.container{
		width: 100%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 570rpx;
	}
	.box-img{
		width: 702rpx;
		margin: 27rpx auto;
		height: 48rpx;
		display: flex;
		justify-content: center;
		image{
			    width: 293rpx;
			    height: 44rpx;
		}
	}
	.box {
		// background: #fff;
		padding: 24rpx;
		// margin-top: 24rpx;
	
		.box-title {
			font-weight: bold;
			font-size: 32rpx;
	
		}
	
		.office {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20rpx;
			margin-bottom: 24rpx;
			// padding-top: 24rpx;
	
			.office-bg {
				// margin-bottom: 24rpx;
				width: 224rpx;
				height: 194rpx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				// background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
	
				// border: 2rpx solid #E6E6E6;
				image {
					width: 71rpx;
					height: 72rpx;
				}
	
				view {
					font-weight: 500;
					font-size: 32rpx;
					color: #4D4D4D;
				}
			}
	
			// padding: 24rpx 22rpx;
		}
	
	
		.more {
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 64rpx;
			background: #F5F3F0;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}
	.office-item{
		margin-bottom: 5rpx;
	}
	.bg {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
		padding-top: 65rpx;
	
	
		.title-img {
			width: 100rpx;
		}
	
		text {
			display: inline-block;
	
			color: #1a1a1a;
			font-size: 32rpx;
			font-weight: bold;
		}
	
		view {
			width: 100rpx;
		}
	}
	
	.bg-color {
		// background: #fff;
	}
</style>